import React, { Component } from 'react'
import { connect } from 'react-redux'
import { DetailWrap, Header, Content } from './style'
import * as actionCreator from './store/actionCreator'
class Detail extends Component {
    render() {
        return (
            <DetailWrap>
                <Header>{this.props.title}</Header>
                <Content dangerouslySetInnerHTML={{__html: this.props.content}}>
                   
                </Content>
            </DetailWrap>
        )
    }
    componentDidMount(){
        this.props.getDetail(this.props.match.params.id)
    }
}
const mapState = (state) => ({
    title: state.getIn(['detail', 'title']),
    content: state.getIn(['detail', 'content']) 
})

const mapDispatch = (dispatch) => ({
    getDetail(id){
        dispatch(actionCreator.getDetail(id))
    }
})
export default connect(mapState, mapDispatch)(Detail)
